<template>
  <g class="prop-icon" :transform="props.transform">
    <g
      v-for="(v, i) in PROP[props.propName].icon"
      :key="v + i"
    >
      <Pixel
        v-for="(t, d) in v"
        :key="(t || '_') + d"
        :x="d"
        :y="i"
        :fill="colors[t]"
      />
    </g>
  </g>
</template>

<script setup>
  import Pixel from './Pixel.vue'
  import { PROP } from '@/utils/global'

  const colors = {
    ' ': 'none',
    w: '#FFFFFF',
    g: '#ADADAD',
    b: '#00424A',
  }

  const props = defineProps({
    propName: {
      validator(value, props) {
        return Object.keys(PROP).includes(value)
      }
    },
    transform: {
      type: String,
      default: ''
    },
  })
</script>

<style lang="scss" scoped>

</style>